<template>
  <div>
    <el-dialog
      :title="editInfo.status == 1 ? '处理隐患' : '隐患详情'"
      :visible.sync="dialogVisible"
      width="900px"
      :show-close="false"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div
        class="work"
        @click="onWork"
        v-if="editInfo.status != 1 && editInfo.mode == 1 && flag"
      >
        关联工单
      </div>
      <div class="title">基础信息</div>
      <el-row>
        <el-col :span="8">
          <div class="div_box">
            隐患名称：<span>{{ localEditInfo.name }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="div_box">
            隐患类型：<span>
               <dict-tag :options="dict.type.device_hidden_type" :value="localEditInfo.type" :showTitle="true"/>
            </span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="div_box">
            处理状态：<span>
              <span v-if="localEditInfo.status == 1">未处理</span>
              <span v-else-if="localEditInfo.status == 2">已忽略</span>
              <span v-else-if="localEditInfo.status == 3">修复中</span>
              <span v-else-if="localEditInfo.status == 4">已修复</span>
            </span>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <div class="div_box">
            组织机构：<span>{{ localEditInfo.orgName }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="div_box">
            安装点：<span>{{ localEditInfo.spaceName }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="div_box">
            上报时间：<span>
              {{ localEditInfo.createTime }}
            </span>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <div class="div_box">
            隐患描述：<span>{{ localEditInfo.content }}</span>
          </div>
        </el-col>
        <el-col :span="8"> </el-col>
        <el-col :span="8"> </el-col>
      </el-row>

      <div class="title">处理意见</div>

      <el-form
        :model="addInfo"
        :rules="rules"
        ref="refAddInfo"
        label-width="78px"
        v-if="editInfo.status == 1"
      >
        <el-form-item size="small" label="处理类型" prop="confirmResult">
          <el-radio-group v-model="addInfo.confirmResult">
            <el-radio
              :label="item"
              v-for="(item, index) in confirmResultList"
              :key="index"
              >{{ item }}</el-radio
            >
          </el-radio-group>
        </el-form-item>

        <el-form-item
          size="small"
          label="处理方式"
          prop="confirmmode"
          v-if="
            addInfo.confirmResult == '真实隐患' ||
            addInfo.confirmResult == '误报'
          "
        >
          <el-radio-group v-model="addInfo.confirmmode">
            <el-radio label="现场解决">现场解决</el-radio>
            <!-- <el-radio label="转化工单">转化工单</el-radio> -->
          </el-radio-group>
        </el-form-item>

        <el-form-item
          size="small"
          label="维保单位"
          prop="maintenanceId"
          v-if="
            addInfo.confirmResult == '转化工单' ||
            (addInfo.confirmResult == '真实隐患' &&
              addInfo.confirmmode == '转化工单') ||
            (addInfo.confirmResult == '误报' &&
              addInfo.confirmmode == '转化工单')
          "
        >
          <el-select
            v-model="addInfo.maintenanceId"
            filterable
            placeholder="请选择维保单位"
            style="width: 30%"
            class="elSelect"
            v-loadMore="loadMore"
          >
            <el-option
              v-for="(item, i) in dataList"
              :key="i"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
            <div
              class="div_boxloading"
              v-loading="loading"
              :style="loading ? '' : 'display: none;'"
            ></div>
          </el-select>
        </el-form-item>

        <el-form-item size="small" label="备注信息" prop="remark">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="备注信息"
            v-model="addInfo.remark"
            oninput="value=value.replace(/\s*/g,'')"
            @blur="addInfo.remark = $event.target.value"
            maxlength="100"
            resize="none"
            :autosize="{ minRows: 2, maxRows: 15 }"
            style="width: 30%"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>

      <div v-else>
        <el-row>
          <el-col :span="8">
            <div class="div_box">
              处理方式：<span>
                <span v-if="localEditInfo.mode == 1">工单处理</span>
                <span v-else-if="localEditInfo.mode == 0">现场处理</span></span
              >
            </div>
          </el-col>
          <el-col :span="8">
            <div class="div_box">
              上报人用户名：<span>{{ localEditInfo.username }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="div_box">
              确认人用户名：<span>{{ localEditInfo.confirmUsername }}</span>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <div class="div_box">
              确认时间：<span>{{ localEditInfo.confirmTime }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="div_box">
              <div class="div_box">
                备注信息：<span> {{ localEditInfo.remark }}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="div_box"></div>
          </el-col>
        </el-row>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog" v-if="editInfo.status != 1"
          >关 闭</el-button
        >
        <el-button
          size="small"
          @click="closeDialog"
          class="cancel-button"
          v-if="editInfo.status == 1"
          >取 消</el-button
        >
        <el-button
          size="small"
          @click="addSubmit"
          class="confirm-button"
          v-preventReClick="1000"
          v-if="editInfo.status == 1"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <workDetails ref="refworkDetails" :editInfo="editInfo"></workDetails>
  </div>
</template>
<script>
import loadMore from "@mixin/loadMore";
import {
  reqMaintenancePage,
  reqHiddenDangerUpdate,
  reqHiddenDanger,
} from "@/api/api";
import { mapState } from "vuex";

export default {
    dicts: ['device_hidden_type'],
  name: "",
  props: ["editInfo"],
  mixins: [loadMore],
  components: {
    workDetails: () =>
      import("@/views/maintenance/workOrder/components/workDetails"), //异步组件,解决“[Vue warn]: Unknown custom element”错误,提高性能。
  },
  data() {
    return {
      dialogVisible: false,
      addInfo: {
        confirmResult: "现场解决",
        confirmmode: "现场解决",
        mode: "",
        maintenanceId: "",
        remark: "",
      },
      // confirmResultList: ["现场解决", "转化工单"],
         confirmResultList: ["现场解决"],
      // 表单验证规则
      rules: {
        maintenanceId: [
          {
            required: true,
            message: "请选择维保单位",
            trigger: "change",
          },
        ],
        confirmResult: [
          {
            required: true,
            message: "请选择处理类型",
            trigger: "change",
          },
        ],
        confirmmode: [
          {
            required: true,
            message: "请选择处理方式",
            trigger: "change",
          },
        ],
      },
      loading: false,
      sysInstanceIndex: 1,
      sysInstanceTotalPages: 10,
      dataList: [],
      flag: true,
      localEditInfo: {},
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {
    dialogVisible(e) {
      if (e) {
        // console.log(this.editInfo,"eee");
        this.getDataList(); // 维保组列表
        this.getHiddenDanger(
          this.editInfo.hiddenDangerId
            ? this.editInfo.hiddenDangerId
            : this.editInfo.id
        ); // 获取隐患信息
        if (this.editInfo.hiddenDangerId) {
          this.flag = false;
        } else {
          this.flag = true;
        }
        if (this.editInfo.source == 0) {
          // 设备上报
          this.confirmResultList = ["真实隐患", "误报", "测试"];
          this.addInfo.confirmResult = "真实隐患";
        } else {
          // 人为
          // this.confirmResultList = ["现场解决", "转化工单"];
           this.confirmResultList = ["现场解决"];
          this.addInfo.confirmResult = "现场解决";
        }
      }
    },
  },
  methods: {
    // 获取隐患信息
    async getHiddenDanger(hiddenDangerId) {
      // console.log(hiddenDangerId,"hiddenDangerId");
      const res = await reqHiddenDanger(hiddenDangerId);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // console.log(res);

      if (res.data.row != null) {
        this.localEditInfo = res.data.row;
      }
    },
    // 工单详情
    onWork() {
      this.$refs.refworkDetails.dialogVisible = true;
      this.$refs.refworkDetails.getByHiddenDangerId(this.editInfo.id);
    },
    async loadMore() {
      if (this.sysInstanceIndex >= Math.ceil(this.sysInstanceTotalPages / 10))
        return;
      this.sysInstanceIndex++;
      this.loading = true;
      // 获取列表数据的方法
      await this.getDataList();
      this.loading = false;
    },
    // 维保组列表
    async getDataList() {
      const res = await reqMaintenancePage(this.sysInstanceIndex, 10, {
        orgId: this.editInfo.orgId,
        userId: this.user.userId,
        roleName: this.user.roleName,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataList = [...this.dataList, ...res.data.rows];
      this.sysInstanceTotalPages = res.data.total;
    },
    addSubmit() {
      this.$refs.refAddInfo.validate(async (valid) => {
        if (valid) {
          let mode = "";
          if (this.editInfo.source == 1) {
            // 人为
            if (this.addInfo.confirmResult == "转化工单") {
              mode = 1;
            } else {
              mode = 0;
            }
          } else {
            // 设备
            if (this.addInfo.confirmResult == "测试") {
              mode = "";
            } else {
              if (this.addInfo.confirmmode == "转化工单") {
                mode = 1;
              } else {
                mode = 0;
              }
            }
          }
          const res2 = await reqHiddenDangerUpdate({
            id: this.editInfo.id,
            userId: this.user.userId,
            username: this.user.userName,
            confirmResult: this.addInfo.confirmResult,
            mode: mode,
            maintenanceId: this.addInfo.maintenanceId,
            remark: this.addInfo.remark,
          });
          if (res2.code !== 20000)
            return this.$modal.notifyWarning(res2.message);

          this.$modal.notifySuccess("处理成功！");
          this.closeDialog();
          this.$parent.getDataList(); //更新列表
        }
      });
    },
    // 点击关闭弹框
    closeDialog() {
      if (this.$refs.refAddInfo != null) {
        this.$refs.refAddInfo.resetFields();
      }
      this.dialogVisible = false;
      this.sysInstanceIndex = 1;
      this.sysInstanceTotalPages = 10;
      this.dataList = [];
    },
  },
  deactivated() {
    this.closeDialog();
  },
};
</script>

<style lang="less" scoped>
@import url("../../../common.less");

span {
  color: @primaryFFFColor2;
}

// 内容
::v-deep .el-descriptions__body {
  background-color: @primaryHeaderBgcolor;
}

// 边框
::v-deep .el-descriptions-item__cell {
  border: 1px solid @primaryBorderColor !important;
}

// 标题
::v-deep .el-descriptions-item__label.is-bordered-label {
  background-color: @primaryHeaderBgcolor;
}

.div_box {
  height: 45px;
  // line-height: 30px;
  color: @primaryThemeTxtColor;
}

.title {
  height: 40px;
  color: @primaryFFFColor2;
  font-size: 16px;
}

//   单选按钮
::v-deep .el-radio {
  color: @primaryThemeTxtColor2;
}

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #7367f0;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: #7367f0;
  background: #7367f0;
}

.div_boxloading {
  height: 276px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  z-index: 9999;
}

::v-deep .el-loading-mask {
  border-radius: 4px;
}

::v-deep .el-dialog__body {
  position: relative !important;
}

.work {
  position: absolute;
  right: 20px;
  top: 30px;
  color: #7367f0;
  cursor: pointer;
}
// 备注信息
::v-deep .el-textarea .el-input__count {
  background: none !important;
}
::v-deep .el-textarea__inner {
  padding-bottom: 35px;
}
</style>
